<template>
    <div>
        <div class="ContentTwo-box" @mouseenter="enter" @mouseleave="leave">
            <content-title :content="title"></content-title>
            <ul class="ContentTwo-title-imgs">
                <li class="ContentTwo-title-img" v-for="(item,index) of imgList" :key="index" ><img width=100% :src="item.URL" alt="">
                    <p class="ContentTwo-title-tit ContentTwo-title-tit1">{{item.Title1}}</p>
                    <p class="ContentTwo-title-tit ContentTwo-title-tit2">{{item.Title2}}</p>
                </li>
            </ul>
            <div class="ContentTwo-bottom">
                <ul class="ContentTwo-bottom-list">
                    <li class="ContentTwo-bottom-item" v-for="(itemx,index) of ContentTwoSelect" :key="index+'select'" :att="index" @click="click">{{itemx}}
                        <span class="ContentTwo-bottom-item-bottom"></span>
                    </li>
                </ul>
            </div>
            <div class="ContentTwo-showround">
                <ul class="ContentTwo-showround-list">
                    <li class="ContentTwo-showround-item" v-for="(items,index) of ShowList[ShowKey]" :key="index+'showround'">
                        <p class="ContentTwo-showround-title">{{items.title}}</p>
                        <span class="ContentTwo-showround-author">{{items.author}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import ContentTitle from "@/main/components/ContentTitle"
import { setInterval, clearInterval } from 'timers';
export default {
    name: "ContentTwo",
    data(){
        return{
            "title": 0,
            "imgList": [{
                    "URL":"/static/img/content2_1.jpg",
                    "Title1":"大岳丸技能",
                    "Title2":"久次良技能"
                },{
                    "URL":"/static/img/content2_2.jpg",
                    "Title1":"海国退治",
                    "Title2":"超鬼王征伐"
                },{
                    "URL":"/static/img/content2_3.jpg",
                    "Title1":"海之旅探索",
                    "Title2":"海图退治"
            }],
            "ContentTwoSelect": ["最新","萌新上路","式神御魂","秘闻副本","斗技阵容"],
            "ShowList": [[{
                "title": "【玩法】【已授权】死神联动在即！勾玉被大岳丸掏空？一周攒6000勾玉有可能吗？",
                "author": "作者：大神-葉临渊"
                },{
                    "title": "【玩法】【已授权】鬼灵歌姬逢魔登顶干货攻略",
                    "author": "作者：大神-解说七老爷"
                },{
                    "title": "【御魂】【已授权】老徐六星御魂整理攻略",
                    "author": "作者：大神-徐清林"
                },{
                    "title": "【玩法】【已授权】世界BOSS【鬼灵歌伎】周一回归！三套主流阵容助你登顶",
                    "author": "作者：大神-葉临渊"
                },{
                    "title": "【御魂】【已授权】御魂怎么搭配？——这个表格告诉你",
                    "author": "作者：大神-咸鱼尼酱"
                },{
                    "title": "【玩法】【已授权】鬼灵歌伎SP妖刀点怪技巧",
                    "author": "作者：大神-CC落华生"
                }],[{
                    "title": "【新手】第四期！ 御魂从哪来？躺魂十的各种姿势！",
                    "author": "作者：Yeno1996"
                },{
                    "title": "【新手】第二期 狗粮队长全解析！养这些！不吃亏～",
                    "author": "作者：Yeno1996"
                },{
                    "title": "【新手】特别篇~大将：呱世无双的正确入手攻略~",
                    "author": "作者：Yeno1996"
                },{
                    "title": "【新手】第一期 省达摩、省金币、省勾玉！",
                    "author": "作者：Yeno1996"
                },{
                    "title": "【新手】第三期 你们应该强化的御魂是这样滴~",
                    "author": "作者：Yeno1996"
                },{
                    "title": "【新手】简单清晰的结界卡合成方法",
                    "author": "作者：Yeno1996"
                }]],
            "ShowKey": 0,
            "setTimeName": ''
        }
        
    },
    components: {
       ContentTitle 
    },
    mounted() {
        this.init();
        this.m()    
    },
    methods: {
        click(e){
            if(e.target.nodeName === "LI")
            {
                $(e.target).css({
                    "background": "#fff",
                    "color": "#74bd95"
                }).siblings().css({
                    "background": "transparent",
                    "color": "#fff"
                })

                this.ShowKey = $(e.target).attr("att");
                console.log(this.ShowKey)
            }
        },
        enter(){
            clearInterval(this.setTimeName);
        },
        leave(){
            this.m();
        },
        init(){
            $(".ContentTwo-bottom-item").eq(0).css({
                    "background": "#fff",
                    "color": "#74bd95"
                }).siblings().css({
                    "background": "transparent",
                    "color": "#fff"
            })
        },
        m(){
            let index = 0;
            let len = this.ContentTwoSelect.length
            this.setTimeName =setInterval(()=>{
                    index++
                    if(index>=len){index=0}
                    $(".ContentTwo-bottom-item").eq(index).css({
                        "background": "#fff",
                        "color": "#74bd95"
                    }).siblings().css({
                        "background": "transparent",
                        "color": "#fff"
                    })
                    this.ShowKey = index;
                },3000)
        }
    }
}
</script>
<style lang="stylus" scoped>
    .ContentTwo-box
        position: relative
        margin: -1rem auto
        width: 85%
        min-width: 1180px
        height: 9.2rem
        // background: red
        .ContentTwo-title-imgs
            display: flex
            flex-flow: row nowrap
            justify-content: space-between
            position: absolute
            top: 0
            left: 136px
            z-index: 3
            width: 21.75rem
            height: 4.18rem
            .ContentTwo-title-img
                position: relative
                width: 6.8rem
                height: 4.18rem
                .ContentTwo-title-tit
                    position: absolute
                    box-sizing: border-box
                    width: .8rem
                    word-break: break-all
                    line-height: .3rem
                    padding: 0 .2rem
                    background: #ffffff
                    border: .02rem solid #ddd
                    transition: .3s
                .ContentTwo-title-tit1
                    top: 0px
                    left: 12px
                .ContentTwo-title-tit2
                    top: 22px
                    left: 60px
            .ContentTwo-title-img:hover>.ContentTwo-title-tit
                transform: translateY(-.2rem)
        .ContentTwo-bottom
            position: absolute 
            top: 178px
            z-index: 1
            width: 100%
            height: 2rem
            background: #ffffff
            background: url("/static/img/content2_bg.jpg") no-repeat 0 0 /100%
            .ContentTwo-bottom-list
                position: absolute
                bottom: 0
                left: 136px
                width: 21.2rem
                height: .88rem
                .ContentTwo-bottom-item
                    position: relative
                    float: left
                    width: 3.08rem
                    height: .88rem
                    text-align: center
                    line-height: .88rem
                    color: #fff
                    background: transparent
                    .ContentTwo-bottom-item-bottom
                        position: absolute
                        bottom: 0
                        left: 0
                        right: 0
                        margin: 0 auto
                        width: 1.42rem
                        height: .08rem
                        background: url("/static/img/box1.png") no-repeat -725px -492px
                .ContentTwo-bottom-item::after
                    content: '.'
                    font-size: 0
                    width: .02rem
                    height: .28rem
                    background: #ffffff
                    position: absolute
                    right: -.02rem
                    top: .3rem   
        .ContentTwo-showround
            box-sizing: border-box
            position: absolute 
            top: 278px
            z-index: 1
            width: 100%
            height: 2.72rem
            border-left: .04rem solid #74bd95
            border-right: .04rem solid #74bd95
            border-bottom: .04rem solid #74bd95
            background: #fff
            .ContentTwo-showround-list
                display: flex
                flex-flow: row wrap
                justify-content: space-between
                align-content: space-around
                position: absolute
                left: 134px
                width: 89%
                height: 100%
                // background: blue
                .ContentTwo-showround-item
                    width: 33%
                    height: .8rem
                    // background: pink
                    border-left: .04rem solid #ccc
                    .ContentTwo-showround-title
                        margin: 0 auto
                        width: 90%
                        height: .4rem
                        font-weight: 500
                        font-size: 14px
                        line-height: .4rem
                        color: #212121
                        overflow: hidden
                        white-space: nowrap
                        text-overflow: ellipsis
                    .ContentTwo-showround-author
                        margin-left: .4rem
                        font-size: 12px
                        color: #bbb

</style>
